<template>
  <div class="user-userindex">
    <div class="uin-title">
      <div class="tit-tit">
        <div class="tit-le">
          <i @click="goback" class="iconfont icon-arrow-right"></i>
        </div>
        <div class="tit-rg">
          <span>{{ uinfo.username }}的主页</span>
        </div>
      </div>
      <div class="tit-uinfo">
        <img :src="uinfo.uportrait" alt="">
        <div class="u-uname">
          <span>{{ uinfo.username }}</span>
          <i v-show="uinfo.sex == '女'" class="iconfont icon-nv"></i>
          <i v-show="uinfo.sex == '男'" class="iconfont icon-nan"></i>
        </div>
      </div>
    </div>
    <div class="uin-uads">
      <span>{{ uinfo.role }}</span>
      <div class="ad-box">
        <i class="iconfont icon-dizhi"></i>
        <span>{{ uinfo.area }}</span>
      </div>
      <span>{{ uinfo.age }}岁</span>
    </div>
    <div class="uin-tabs">
      <van-tabs v-model="active" swipeable animated>
        <van-tab  title="作品">
          <van-pull-refresh v-model="refreshing"  success-text="刷新成功" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="10"
            >
              <van-empty
                v-show="empty"
                class="custom-image"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                description="目前您还没有发布过作品哦"
              />
              <van-skeleton v-show="skeleton" v-for="(item,index) of 4" :key="index" title avatar :row="5" />
              <div @click="gozpisd(item)" class="box-msg" v-for="(item,index) of userrelase" :key="index">
                <div class="msg-uinfo">
                  <div class="ui-le">
                    <img :src="item.user.uportrait" alt="">
                    <div class="le-msg">
                      <span>{{ item.user.username }}</span>
                      <span>{{ item.newaddTime }}</span>
                    </div>
                  </div>
                  <div class="ui-rg">
                    <div class="rg-box">
                      <span>阅读 {{ item.workflow }}</span>
                    </div>
                  </div>
                </div>
                <div class="msg-text">
                  <span>{{ item.themetext }}</span>
                </div>
                <div class="msg-img">
                  <div class="img_box" v-for='(imgs,index) in item.imgs' :key='index' v-show="index<6">
                    <img :src="imgs" alt="" @click.stop="getImg(item.imgs,index)">
                    <div class="img-flow" v-if="index==5" @click.stop="getImg(item,index)">
                      <span>+{{item.imgs.length-6}}</span>
                    </div>
                  </div>
                </div>
                <div class="msg-cz">
                  <div class="cz-le" @click.stop="destorys(item)">
                    <van-icon name="delete" />
                  </div>
                  <div class="cz-rg">
                    <div class="cz-box">
                      <i class="iconfont icon-dianzan2"></i>
                      <span>{{ item.thumbs.length }}</span>
                    </div>
                    <div class="cz-box">
                      <i class="iconfont icon-pinglun3"></i>
                      <span>{{ item.comments.length }}</span>
                    </div>
                    <div class="cz-box">
                      <i class="iconfont icon-fenxiang"></i>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab  title="约拍">
          <comyp :uinfo="uinfo" :active="active"/>
        </van-tab>
        <van-tab  title="教程">
          <comjc :uinfo="uinfo" :active="active"/>
        </van-tab>
        <van-tab  title="场地">
          <van-pull-refresh v-model="cdrefreshing" @refresh="oncdRefresh">
            <van-list
              v-model="cdloading"
              :finished="cdfinished"
              finished-text="没有更多了"
              @load="cdonLoad"
              offset="10"
            >
              <van-empty
                v-show="cdempty"
                class="custom-image"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                description="目前您还没有发布过拍摄场地哦"
              />
              <van-skeleton v-show="cdskeleton" v-for="(item,index) of 5" :key="index" title avatar :row="5" />
              <div v-for="(item,index) of ucdlist" :key="index" class="cd-msg" @click="gocdisd(item)">
                <div class="msg-img-box">
                  <img :src="item.imgs[0]" alt="">
                </div>
                <div class="msg-text">
                  <div class="text-theme">
                    <span>{{ item.fieldname }}</span>
                  </div>
                  <div class="text-content">
                    <span>{{ item.introduce }}</span>
                  </div>
                </div>
                <div class="msg-cz">
                  <div class="cz-le">
                    <div class="le-icon">
                      <i class="iconfont icon-chengshi"></i>
                      <span>{{ item.fieldType }}</span>
                    </div>
                    <div class="le-icon">
                      <i class="iconfont icon-dizhi"></i>
                      <span>{{ item.fieldAdress }}</span>
                    </div>
                  </div>
                  <div class="cz-rg">
                    <div class="cz-box">
                      <span>浏览: {{ item.browse }}</span>
                    </div>
                    <div class="cz-box" @click.stop="destorys(item)">
                      <i class="iconfont icon-shanchu"></i>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {Dialog, ImagePreview, Toast} from 'vant';
import comyp from '@/Photography/components/comyp';
import comjc from '@/Photography/components/comjc';

export default {
  components:{
    comyp,
    comjc,
  },
  name: "userindex",
  data(){
    return{
      active:'',
      uinfo: {},
      userrelase: [],
      loading: false,
      finished: false,
      refreshing: false,
      uzpage: null,
      page: 1,
      skeleton: true,
      empty: false,
      ucdlist: [],
      cdloading: false,
      cdfinished: false,
      cdrefreshing: false,
      cdpage: 1,
      cdmaxpage: null,
      cdskeleton: true,
      cdempty: false,
    }
  },
  created() {
    const { user, active } = this.$route.params;
    if(active){
      this.active = active
    }
    this.uinfo = user;
    const year = new Date().getFullYear() - new Date(this.uinfo.birthday).getFullYear();
    this.uinfo.age = year;
    this.zpfind(this.uinfo.uid)
    this.cdfind(this.uinfo.uid)
  },
  methods:{
    goback(){
      const { tutorial, user, appointment, field, release } = this.$route.params
      var count = 0
      for( var i in this.$route.params){
        count++
      }
      console.info('count',count)
      if(count == 1){
        this.$router.go(-1)
      }else {
        if( tutorial && user ){
          this.$router.replace({
            name: "jcisd",
            params: {
              tutorial,
            }
          })
        }else
        if( field && user){
          this.$router.replace({
            name: "cdisd",
            params: {
              field,
            }
          })
        }else
        if( release && user){
          this.$router.replace({
            name: "zpisd",
            params: {
              release,
            }
          })
        }else
        if( appointment && user){
          this.$router.replace({
            name: "ypisd",
            params: {
              appointment,
            }
          })
        }else {
          this.$router.replace({
            name: 'user'
            }
          )
        }
      }
    },
    getImg(images,index){
      ImagePreview({
        images: this.images,
        showIndex:true,
        loop:false, //是否循环播放
        startPosition:index
      })
    },
    async destorys(item){
      console.info(item)
      Dialog.confirm({
        title: '温馨提示',
        message: '该操作会永久删除,是否要删除',
      })
        .then(async () => {
          const res = await this.$axios({
            url: '/blog/releasedelete',
            method: 'post',
            data: {
              releaseid: item.releaseid
            }
          })
          const { success, msg } = res.data
          if(success){
            Toast.success(msg);
            this.onRefresh();
          }else {
            Toast.fail(msg);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    onLoad(){
      console.info("加载数据")
      const uid = this.uinfo.uid
      this.loading = true;
      if (this.page > this.uzpage) {
        this.loading = false;
        this.finished = true;
      }else {
        setTimeout(()=>{
          this.zpfind(uid)
          this.loading = false;
        },1000)
      }
    },
    onRefresh(){
      this.skeleton = true
      setTimeout(() => {
        const uid = this.uinfo.uid
        this.userrelase = []
        this.page = 1
        this.zpfind(uid)
        this.refreshing = false;
        this.finished = false;
        this.skeleton = false;
      }, 1000);
    },
    async zpfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/releasefind',
          method:"post",
          data:{
            uid,
            page: this.page,
          }
        })
        const {success, msg, data, maxpage} = res.data
        if (success){
          if(data.length == 0 && this.page == 1){
            this.empty = true
            this.skeleton = false
          }
          if(data.length != 0){
            this.skeleton = false;
          }
          data.map(r=>{
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.theme = r.theme.split(',')
            r.pictures.map(url=>{
              r.imgs.push(url.photourl)
            })
          })
          this.uzpage = maxpage
          data.forEach(r=>{
            this.userrelase.push(r)
          })
          this.page++;
          console.info(data)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    gozpisd(item){
      this.$router.push({
        name: "zpisd",
        params: {
          release: item
        }
      })
    },
    cdonLoad(){
      console.info("加载数据")
      const uid = this.uinfo.uid
      this.cdloading = true;
      if (this.cdpage > this.cdmaxpage) {
        this.cdloading = false;
        this.cdfinished = true;
      }else {
        setTimeout(()=>{
          this.cdfind(uid)
          this.cdloading = false;
        },1000)
      }
    },
    oncdRefresh(){
      this.cdskeleton = true
      setTimeout(() => {
        const uid = this.uinfo.uid
        this.ucdlist = []
        this.cdpage = 1
        this.cdfind(uid)
        this.cdrefreshing = false;
        this.cdfinished = false;
        this.cdskeleton = false;
      }, 1000);
    },
    async cdfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/fieldfind',
          method:"post",
          data:{
            uid,
            page: this.cdpage,
          }
        })
        const {success, msg, data, length, maxpage} = res.data
        if (success){
          if(data.rows.length == 0 && this.cdpage == 1){
            this.cdempty = true
            this.cdskeleton = false
          }
          if(data.rows.length != 0){
            this.cdskeleton = false;
          }
          data.rows.map(r=>{
            const year = new Date(r.fieldTime).getFullYear();
            const mouth = `${new Date(r.fieldTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.fieldTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.suitable = r.suitable.split(',')
            r.pictures.map(url=>{
              r.imgs.push(url.photourl)
            })
          })
          this.cdmaxpage = maxpage
          data.rows.forEach(r=>{
            this.ucdlist.push(r)
          })
          this.cdpage++;
          console.info(data)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    gocdisd(item){
      this.$router.push({
        name: "cdisd",
        params: {
          field: item
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.user-userindex{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .uin-title{
    width: 100%;
    height: vw(400);
    background-color: #fa6d86;
    display: flex;
    flex-direction: column;
    .tit-tit{
      width: 100%;
      height: vw(90);
      box-sizing: border-box;
      line-height: vw(90);
      display: flex;
      .tit-le{
        width: vw(100);
        i{
          margin-left: vw(30);
          font-size: vw(50);
          color: #ffffff;
        }
      }
      .tit-rg{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          transform: translate(vw(-50),vw(2));
          font-size: vw(32);
          color: #ffffff;
        }
      }
    }
    .tit-uinfo{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        width: vw(180);
        height: vw(180);
        border-radius: 50%;
        object-fit: cover;
      }
      .u-uname{
        color: #ffffff;
        margin-top: vw(20);
        i{
          padding-left: vw(10);
        }
      }
    }
  }
  .uin-uads{
    height: vw(90);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #999999;
    &>span{
      padding: 0 vw(25);
    }
    .ad-box{
      span{
        padding-left: vw(5);
      }
    }
  }
  .uin-tabs{
    margin-top: vw(10);
    flex:1;
    .box-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-uinfo{
        width: 100%;
        height: vw(100);
        display: flex;
        .ui-le{
          width: vw(510);
          display: flex;
          align-items: center;
          img{
            width: vw(85);
            height: vw(85);
            border-radius: 50%;
            object-fit: cover;
          }
          .le-msg{
            padding-left: vw(30);
            display: flex;
            flex-direction: column;
            line-height: vw(40);
            span{
              font-size: vw(28);
              &:last-child{
                color: #d5d5d5;
                font-size: vw(24);
              }
            }

          }
        }
        .ui-rg{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .rg-box{
            height: vw(40);
            border-radius: vw(30);
            border: 1px solid #d5d5d5;
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              padding: 0 vw(20);
              font-size: vw(20);
              color: #d5d5d5;
            }
          }
        }
      }
      .msg-img{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: vw(10);
        .img_box{
          position: relative;
          padding-right: vw(10);
          img{
            width: vw(220);
            height: vw(220);
            object-fit: cover;
          }
          .img-flow{
            position: absolute;
            width: vw(220);
            height: vw(220);
            top: 0;
            background-color: #00000070;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              font-size: vw(60);
              color: #b3aaaa;
            }
          }
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          font-size: vw(40);
          color: lightsalmon;
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
    .zp-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-uinfo{
        width: 100%;
        height: vw(100);
        display: flex;
        .ui-le{
          width: vw(510);
          display: flex;
          align-items: center;
          img{
            width: vw(85);
            height: vw(85);
            border-radius: 50%;
            object-fit: cover;
          }
          .le-msg{
            padding-left: vw(30);
            display: flex;
            flex-direction: column;
            line-height: vw(40);
            span{
              font-size: vw(28);
              &:last-child{
                color: #d5d5d5;
                font-size: vw(24);
              }
            }

          }
        }
        .ui-rg{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .rg-box{
            width: vw(100);
            height: vw(40);
            border-radius: vw(30);
            border: 1px solid #d5d5d5;
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              font-size: vw(20);
              color: #d5d5d5;
            }
          }
        }
      }
      .msg-img{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: vw(10);
        .img_box{
          position: relative;
          padding-right: vw(10);
          img{
            width: vw(220);
            height: vw(220);
            object-fit: cover;
          }
          .img-flow{
            position: absolute;
            width: vw(220);
            height: vw(220);
            top: 0;
            background-color: #00000070;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              font-size: vw(60);
              color: #b3aaaa;
            }
          }
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          .le-gzbox{
            width: vw(120);
            height: vw(40);
            border: 1px solid lightsalmon;
            border-radius: vw(20);
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              font-size: vw(20);
              color: lightsalmon;
            }
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
    .yp-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-uinfo{
        width: 100%;
        height: vw(100);
        display: flex;
        .ui-le{
          width: vw(510);
          display: flex;
          align-items: center;
          img{
            width: vw(85);
            height: vw(85);
            border-radius: 50%;
            object-fit: cover;
          }
          .le-msg{
            padding-left: vw(30);
            display: flex;
            flex-direction: column;
            line-height: vw(40);
            span{
              font-size: vw(28);
              &:last-child{
                color: #d5d5d5;
                font-size: vw(24);
              }
            }

          }
        }
        .ui-rg{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .rg-box{
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              padding-left: vw(10);
              font-size: vw(25);
            }
          }
        }
      }
      .msg-text{
        display: flex;
        flex-direction: column;
        span{
          font-size: vw(28);
          color: #666666;
          &:first-child{
            font-size: vw(40);
            color: #000000;
          }
        }
      }
      .msg-img{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-top: vw(10);
        .img_box{
          position: relative;
          img{
            width: 100%;
            object-fit: cover;
          }
          .img-flow{
            position: absolute;
            width: vw(50);
            height: vw(50);
            bottom: vw(10);
            right: 0;
            background-color: #00000070;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              font-size: vw(30);
              color: #b3aaaa;
            }
          }
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          .le-gzbox{
            width: vw(120);
            height: vw(40);
            border: 1px solid lightsalmon;
            border-radius: vw(20);
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              font-size: vw(20);
              color: lightsalmon;
            }
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
    .jc-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-img-box{
        img{
          width: 100%;
          height: vw(400);
          object-fit: cover;
        }
      }
      .msg-text{
        margin-top: vw(20);
        .text-theme{
          font-size: vw(35);
          font-weight: bold;
        }
        .text-content{
          font-size: vw(25);
          -webkit-line-clamp: 2;
          letter-spacing:2px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          span{
            font-size: vw(25);
            color: #d5d5d5;
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
    .cd-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-img-box{
        img{
          width: 100%;
          height: vw(400);
          object-fit: cover;
        }
      }
      .msg-text{
        margin-top: vw(20);
        .text-theme{
          font-size: vw(35);
          font-weight: bold;
        }
        .text-content{
          padding-top: vw(20);
          font-size: vw(25);
          -webkit-line-clamp: 2;
          letter-spacing:2px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
          color: #acacac;
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          .le-icon{
            font-size: vw(30);
            color: lightcoral;
            padding-right: vw(15);
            i{
              padding-right: vw(10);
            }
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            span{
              margin-left: vw(10);
              font-size: vw(30);
              color: #a3a3a3;
            }
            i{
              margin-left: vw(10);
              font-size: vw(30);
              color: #a3a3a3;
            }
          }
        }
      }
    }
    ::v-deep .van-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      .van-tab__pane-wrapper--inactive{
        overflow: auto;
      }
      .van-tabs__content{
        height: 0;
        flex-grow: 1;
        overflow-y: auto;
        background-color: #ffffff;
      }
      .van-tabs__nav.van-tabs__nav--line{
        background-color: #ffffff ;
        .van-tabs__line{
          width: vw(60);
          background-color: #fa6d86;
        }
      }
    }
  }
}
</style>
